<template>
  <view class="card_wrapper">
    <view class="card">
      <view class="card_header">
        <!-- <image
          :src="itemData.levelImg"
          class="level_img"
        ></image> -->
        <view class="level_number">{{itemData.floorNumber<10?`0${itemData.floorNumber}`:itemData.floorNumber}}</view>
        <view class="title_text">{{itemData.mainTitle}}</view>
        <view
          class="desc"
          v-if="itemData.desc"
        >{{itemData.desc}}</view>
        <slot name="tag"></slot>
      </view>
      <view class="card_content_wrapper">
        <view class="card_content">
          <view class="content_title">
            {{itemData.subtitle}}
          </view>
          <view
            v-if="itemData.content_desc"
            class="content_desc"
          >
            {{itemData.content_desc}}
          </view>
          <view class="card_list_wrapper">
            <view
              v-for="ele in itemData.foodsVOList"
              :key="ele.foodsUrl"
              class="card_list_item"
            >
              <view>
                <image
                  class="list_item_img"
                  :src="ele.imgUrl"
                  @click="jumpDetail(ele)"
                ></image>
              </view>
              <view class="list_content_wrapper">
                <view class="list_item_title">{{ele.name}}</view>
                <view class="list_item_del">原价：¥{{ele.originalPrice}}</view>
                <view class="price_wrapper">
                  <image
                    class="icon_vip"
                    src="https://zjkj-yutuan.oss-cn-hangzhou.aliyuncs.com/hsl/Price_Icon.png"
                  ></image>
                  <view class="list_item_price">¥{{ele.favourablePrice}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    itemData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  },
  components: {},
  created() {},
  computed: {},
  methods: {
    // jump() {
    //   this.$emit("jump");
    // },
    jumpRegister() {
      uni.navigateTo({
        url: "/pages/register/register"
      });
    },
    jumpDetail(ele) {
      console.log("ele======", ele.name);

      // #ifdef MP-WEIXIN
      this.uma.trackEvent("eventClick", { title: ele.name });
      // #endif
      // #ifdef H5
      window._czc.push(["_trackEvent", "首页", "点击跳转", ele.name]);
      // #endif
      // #ifdef MP-WEIXIN
      if (!uni.getStorageSync("mToken")) {
        this.jumpRegister();
        return;
      }
      // #endif
      // #ifdef H5
      if (!uni.getStorageSync("uToken")) {
        this.jumpRegister();
        return;
      }
      // #endif
      // #ifdef MP-WEIXIN
      uni.navigateToMiniProgram({
        appId: ele.foodsAppId,
        path: ele.foodsUrl,
        extraData: {},
        success(res) {
          // 打开成功
        }
      });
      // #endif
      // #ifdef H5
      window.location.href = ele.foodsUrl
      // window.open(ele.foodsUrl);
      // #endif
    }
  }
};
</script>
<style>
.card_header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}
.level_img {
  width: 103rpx;
  height: 76rpx;
  margin-left: 24rpx;
  margin-right: 15rpx;
}
.title_text {
  font-size: 50rpx;
  font-weight: bold;
  line-height: 1;
}
.desc {
  margin: 0 14rpx;
  font-size: 28rpx;
  color: #999999;
}
.card_content_wrapper {
  /* position: relative; */
  padding-bottom: 60rpx;
  background-image: url("https://zjkj-yutuan.oss-cn-hangzhou.aliyuncs.com/hsl/Common_Bg.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.card_content {
  /* position: absolute;
  width: 100%;
  top: 0; */
}
.content_bg {
  /* width: 750rpx;
  min-height: 626rpx; */
  /* padding-bottom: 60rpx; */
}
.content_title {
  padding-top: 54rpx;
  padding-left: 46rpx;
  padding-bottom: 25rpx;
  font-size: 38rpx;
  font-weight: bold;
  color: #6f4d2c;
}
.content_desc {
  padding-left: 46rpx;
  padding-bottom: 46rpx;
  font-size: 26rpx;
  color: #6b4725;
}
.card_list_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 700rpx;
  margin: 0 auto;
  padding: 20rpx 12rpx;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 0 40rpx 0 rgba(77, 37, 0, 0.1);
  border-radius: 8rpx;
}
.list_content_wrapper {
  padding: 0 6rpx;
  /* box-sizing: border-box; */
}
.card_list_item {
  /* padding: 0 6rpx; */
  box-sizing: border-box;
  border-radius: 6rpx;
  margin-bottom: 20rpx;
  border: 1px solid #e1e1e1;
  padding-bottom: 18rpx;
}
.list_item_img {
  border-radius: 6rpx 6rpx 0 0;
  width: 100%;
  height: 200rpx;
}
.list_item_title {
  width: 195rpx;
  font-size: 28rpx;
  padding: 20rpx 0;
  color: #555555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_item_del {
  color: #999999;
  font-size: 24rpx;
  text-decoration-line: line-through;
}
.list_item_price {
  color: #dc0000;
  font-size: 28rpx;
  font-weight: bold;
}
.price_wrapper {
  display: flex;
  align-items: center;
}
.icon_vip {
  width: 64rpx;
  height: 58rpx;
  margin-right: 10rpx;
}
.level_number {
  font-size: 100rpx;
  line-height: 1;
  padding-left: 26rpx;
  padding-right: 15rpx;
  font-style: italic;
  font-weight: bold;
  margin-bottom: -10rpx;
  color: #222222;
}
</style>